<template>



  <!-- 定位loading -->
  <van-loading color="#fff" vertical type="spinner" v-if="showLoading" class="loading">定位ing...</van-loading>
  <!--  定位失效，手动选择定位 -->
  <!-- 定位失败弹窗 -->
  <van-dialog v-model:show="showDialog" show-cancel-button :message="message" message-align="center" width="300" overlay
    :close-on-click-overlay="true" :lock-scroll="false" @confirm="confirm" />
  <van-sticky @scroll="onScroll" :offset-top="isShowNavBar ? 0 : 46">
    <Navbar v-show="isShowNavBar" title="电影" />
  </van-sticky>
  <Tab :isShowNavBar="isShowNavBar">
    <template v-slot:playing> <!-- 正在热映 -->
      <keep-alive>
        <List />
      </keep-alive>
    </template>

    <template v-slot:upcoming> <!-- 即将上映 -->
      <keep-alive>
        <List />
      </keep-alive>
    </template>
  </Tab>
  <Tabbar />
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  // beforeRouteEnter (to, from, next) {
  //   // 这里有个重点，如果分两部分写的，数据如何关联呢？
  //   // 那么我们需要暴露一个去调用 <script setup> 暴露的方法
  //   next((e) => {
  //     // const data = '一些数据' //将要传递出去的数据
  //     const routeFrom = from
  //     e.beforeRouteEnter(routeFrom)
  //   });

  // },

  beforeRouteEnter (to, from, next) {
    // 这里有个重点，如果分两部分写的，数据如何关联呢？
    // 那么我们需要暴露一个去调用 <script setup> 暴露的方法
    next((vueInstance) => {
      // const data = '一些数据' //将要传递出去的数据
      const routeFrom = from
      vueInstance.deFinedBeforeRouteEnter(routeFrom)
    });

  },


});
</script>






<script setup>

import { ref, onMounted, computed } from 'vue'
import Tab from '@/components/Tab.vue'
import Navbar from '@/components/Navbar.vue'
import Tabbar from '@/components/Tabbar.vue'
import List from '@/components/List.vue'
import { useStore } from '@/stores/index.js';
import { locationCityName } from '@/api/tool.js';
import { getCitiesInfo } from '@/api/index.js';
import { useRouter, useRoute } from 'vue-router'
const router = useRouter();
const route = useRoute();
const store = useStore();



const showLoading = ref(false);
const showDialog = ref(false);
const message = ref('无法获取当前城市定位，请手动选择所在城市');
const isShowNavBar = ref(false); //是否显示navbar



const deFinedBeforeRouteEnter = async (routeFrom) => {
  //做一些事情
  if (routeFrom.path === "/") {
    // 首页初次加载
    console.log("首页初次加载,需要定位")
    await locateCity()
  } else if (routeFrom.path === "/city") {
    //手动选择城市
    //不做定位
    console.log("从city页来，不需要定位")
  }
  // console.log("from:", routeFrom)
}
defineExpose({
  deFinedBeforeRouteEnter,
});


//跳转城市页面去自动定位
const confirm = async () => {
  //跳转到城市页面
  router.push('/city');

}






// 定位城市方法
const locateCity = async () => {
  console.log("定位城市方法");







  // 显示loading 提示
  showLoading.value = true;

  await locationCityName() //根据当前IP 获取当前城市名称

  const response = await getCitiesInfo()

  console.log("getCitiesInfo:", response)
  const { cities } = response.data;

  //根据当前城市名称，查询并设置对应的城市ID
  let found = cities.some(city => {
    //如果匹配到当前城市名称，则设置当前城市ID
    if (city.name === store.cityName) {
      store.setCityId(city.cityId)
      showLoading.value = false;
      return true; // 跳出循环
    }
  })
  if (!found) {
    //如果 没有匹配到当前城市名称，则弹窗提示
    showLoading.value = false;
    showDialog.value = true;
  }
};



const onScroll = ({ scrollTop }) => {
  if (scrollTop >= 10) {
    // 显示并置顶navbar 置顶tab 调整offset-top 为46
    isShowNavBar.value = true;
    // console.log("滑动100")

  } else {
    // 隐藏并取消置顶 navbar ，调整tab  offset-top 为0
    isShowNavBar.value = false;;
    // console.log("滑动《100")
  }

};




</script>


<style scoped>
.loading {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  background: rgba(0, 0, 0, .7);
  padding: 15px 20px;
  border-radius: 10px;
}

.van-dialog__message {
  font-size: 15px;
}
</style>
